<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="8" v-for="item in processList" style="margin-bottom: 12px">
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>{{ item.processName }}</span>
          </div>
          <div
            style="color: #666; font-size: 14px"
            class="card-content-wrapper"
          >
            <div class="card-content-row">步骤:{{ item.stepName }}</div>
            <div class="card-content-row">
              环节:{{ item.systemProcessName }}
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              class="card-content-row"
            >
              <div>
                审批角色:
                <span style="color: red">{{ roleText(item.approveRole) }}</span>
              </div>
              <el-button
                v-if="item.approveRole"
                size="mini"
                type="primary"
                plain
                @click="processHandle(item)"
                >修改</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :title="currentProcess.processName"
      :visible.sync="dialogVisible"
      top="30vh"
      width="30%"
    >
      <el-select
        v-model="currentApproveRole"
        placeholder="请选择审批角色"
        style="width: 100%"
      >
        <el-option
          v-for="item in roleList"
          :key="item.roleId"
          :label="item.roleName"
          :value="item.roleId"
        >
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProcessConfig, updateRole } from "@/api/process/process";
import { listRole } from "@/api/system/role";
export default {
  data() {
    return {
      processList: [],
      roleList: [],
      currentProcess: { processName: "" },
      dialogVisible: false,
      currentApproveRole: "",
    };
  },
  watch: {},
  created() {},
  computed: {
    roleText() {
      return (id) => {
        if (!id) return "";
        const result = this.roleList.find((item) => item.roleId == id);
        if (result) {
          return result.roleName;
        } else {
          return "";
        }
      };
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      getProcessConfig().then((res) => {
        this.processList = res.data;
      });
      listRole({ pageNum: 1, pageSize: 10000 }).then((res) => {
        this.roleList = res.rows;
      });
    },
    processHandle(item) {
      this.dialogVisible = true;
      this.currentProcess = item;
      this.currentApproveRole = item.approveRole;
    },
    confirmHandle() {
      updateRole({
        process: this.currentProcess.processCode,
        roleId: this.currentApproveRole,
      }).then((res) => {
        this.$message.success("修改成功");
        this.dialogVisible = false
      });
    },
  },
};
</script>
<style>
.card-content-wrapper {
  display: flex;
  flex-direction: column;
}
.card-content-row {
  height: 28px;
}
</style>
